<template>
  <div class="user-profile">
    <!-- 用户基本信息 -->
    <div class="user-basic-info">
      <div class="avatar-section">
        <el-avatar :size="80" :src="user.avatar" />
        <div class="online-status" :class="user.online ? 'online' : 'offline'">
          {{ user.online ? '在线' : '离线' }}
        </div>
      </div>
      <div class="user-main-info">
        <h3 class="user-name">{{ user.name }}</h3>
        <el-tag :type="user.type === 'farmer' ? 'success' : 'primary'" size="large">
          {{ user.type === 'farmer' ? '农夫' : '买家' }}
        </el-tag>
        <div class="user-uid">UID: {{ user.id }}</div>
      </div>
      <div class="user-actions">
      </div>
    </div>

    <!-- 用户详细信息 -->
    <div class="user-details">
      <!-- 农夫信息 -->
      <div v-if="user.type === 'farmer'" class="farmer-info">
        <h4>农场信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">种植品类:</span>
            <div class="info-value">
              <el-tag 
                v-for="category in user.plantingCategories" 
                :key="category"
                type="success" 
                size="small"
                class="category-tag"
              >
                {{ category }}
              </el-tag>
            </div>
          </div>
          <div class="info-item">
            <span class="info-label">信用评级:</span>
            <span class="info-value credit-rating" :class="getCreditRatingClass(user.creditRating)">
              {{ user.creditRating }}
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">农田面积:</span>
            <span class="info-value">{{ user.farmArea }} 亩</span>
          </div>
          <div class="info-item">
            <span class="info-label">种植区域:</span>
            <span class="info-value">{{ user.plantingRegion }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">最近评级:</span>
            <span class="info-value">{{ formatDate(user.lastRatingTime) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">种植年限:</span>
            <span class="info-value">{{ user.plantingYears }} 年</span>
          </div>
        </div>
      </div>

      <!-- 买家信息 -->
      <div v-else class="buyer-info">
        <h4>采购信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">收货地址:</span>
            <div class="info-value">
              <div 
                v-for="(address, index) in user.deliveryAddress" 
                :key="index"
                class="address-item"
              >
                {{ address }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 统计数据 -->
      <div class="user-stats">
        <h4>统计数据</h4>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">{{ user.followers }}</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ user.postsCount }}</div>
            <div class="stat-label">帖子</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ user.following }}</div>
            <div class="stat-label">关注</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  user: {
    type: Object,
    required: true
  },
  userPosts: {
    type: Array,
    default: () => []
  }
})

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN')
}

// 获取信用评级样式类
const getCreditRatingClass = (rating) => {
  const ratingMap = {
    'AAA': 'rating-aaa',
    'AA': 'rating-aa',
    'A': 'rating-a',
    'B': 'rating-b',
    'C': 'rating-c'
  }
  return ratingMap[rating] || 'rating-default'
}
</script>

<style scoped>
.user-profile {
  max-height: 70vh;
  overflow-y: auto;
}

.user-basic-info {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.avatar-section {
  text-align: center;
  position: relative;
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  background: #f3f4f6;
  color: #6b7280;
}

.online-status.online {
  background: #ecfdf5;
  color: #10b981;
}

.user-main-info {
  flex: 1;
}

.user-name {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  color: #1f2937;
}

.user-uid {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-details {
  margin-bottom: 24px;
}

.user-details h4 {
  margin: 0 0 16px 0;
  color: #374151;
  font-size: 1.125rem;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-label {
  font-weight: 500;
  color: #6b7280;
  min-width: 80px;
  font-size: 0.875rem;
}

.info-value {
  color: #374151;
  font-size: 0.875rem;
}

.category-tag {
  margin-right: 4px;
  margin-bottom: 4px;
}

.credit-rating {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.rating-aaa {
  background: #dcfce7;
  color: #166534;
}

.rating-aa {
  background: #bbf7d0;
  color: #15803d;
}

.rating-a {
  background: #86efac;
  color: #15803d;
}

.rating-b {
  background: #fef3c7;
  color: #92400e;
}

.rating-c {
  background: #fecaca;
  color: #991b1b;
}

.rating-default {
  background: #f3f4f6;
  color: #6b7280;
}

.address-item {
  padding: 4px 0;
  border-bottom: 1px solid #f3f4f6;
}

.address-item:last-child {
  border-bottom: none;
}

.user-stats {
  margin-top: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

.stat-item {
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-basic-info {
    flex-direction: column;
    text-align: center;
  }

  .user-actions {
    flex-direction: row;
    justify-content: center;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>